var id = 1;
var style="display:inline;position:absolute;background-color:transparent;z-index:1000;left:-100px;top:-100px;width:0px;height:0px;";

function drawRect(x, y, w, h){
    //$("body:first").append('<div id="temp_rectangle" style="position:absolute;background-color:transparent;border:1px solid red;z-index:1000;left:'+x+'px;top:'+y+'px;width:'+w+'px;height:'+h+'px;"></div>');
    $("#temp_rectangle_left").css("left", x+"px");
    $("#temp_rectangle_left").css("top", y+"px");
    $("#temp_rectangle_left").css("height", h+"px");
    
    $("#temp_rectangle_right").css("left", (x+w-1)+"px");
    $("#temp_rectangle_right").css("top", y+"px");
    $("#temp_rectangle_right").css("height", h+"px");
    
    $("#temp_rectangle_top").css("left", x+"px");
    $("#temp_rectangle_top").css("top", y+"px");
    $("#temp_rectangle_top").css("width", w+"px");
    
    $("#temp_rectangle_bottom").css("left", x+"px");
    $("#temp_rectangle_bottom").css("top", (y+h-1)+"px");
    $("#temp_rectangle_bottom").css("width", w+"px");
    
    $("#temp_rectangle_left").css("display", "inline");
    $("#temp_rectangle_right").css("display", "inline");
    $("#temp_rectangle_top").css("display", "inline");
    $("#temp_rectangle_bottom").css("display", "inline");
}

$("body:first").append('<div id="temp_rectangle_left" style="border-left:1px solid red;'+style+'"></div>');
$("body:first").append('<div id="temp_rectangle_top" style="border-top:1px solid red;'+style+'"></div>');
$("body:first").append('<div id="temp_rectangle_right" style="border-right:1px solid red;'+style+'"></div>');
$("body:first").append('<div id="temp_rectangle_bottom" style="border-bottom:1px solid red;'+style+'"></div>');

//$("body:first").append('<textarea style="width:500px;height:300px" id="console"></textarea>');

//$("*").css("border","1px solid red");
$("*").bind("mouseenter", function(event){
    var $target = $(event.target);
    
    event.stopPropagation();
    
    //$target.css("border","1px solid red");
    var offset = $target.offset();
    //alert(offset.left +", "+offset.top);
    var w = $target.outerWidth();
    var h = $target.outerHeight();
    
    
    //$("#console").val(offset.left+','+offset.top+','+w+','+h+'\n'+$("#console").val());
    
    //$target.drawRect(offset.left, offset.top, width, height);
    drawRect(offset.left, offset.top, w, h);
    
});

$("*").bind("mouseleave", function(event){
    event.stopPropagation();
    //$(this).css("border","0px solid red");
    //$("#temp_rectangle").remove();
    $("#temp_rectangle_left").css("display", "none");
    $("#temp_rectangle_right").css("display", "none");
    $("#temp_rectangle_top").css("display", "none");
    $("#temp_rectangle_bottom").css("display", "none");
});
